<template>
  <!-- 方案比对对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="方案比对分析"
    width="95%"
    top="3vh"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @close="handleClose"
    class="plan-comparison-dialog"
  >
    <!-- 对话框头部信息 -->
    <template #header>
      <div class="dialog-header">
        <span class="dialog-title">
          <el-icon style="margin-right: 8px;"><TrendCharts /></el-icon>
          方案比对分析
        </span>
        <el-tag type="info" size="large">已选择 {{ selectedPlans.length }} 个方案</el-tag>
      </div>
    </template>

    <!-- 对话框内容 -->
    <div class="dialog-content">
      <!-- 选中的方案列表 -->
      <div class="selected-plans-bar">
        <div class="plans-label">对比方案：</div>
        <div class="plans-tags">
          <el-tag
            v-for="(plan, index) in selectedPlans"
            :key="plan.id"
            :type="getPlanTagType(index)"
            size="large"
            closable
            @close="handleRemovePlan(plan.id)"
          >
            {{ plan.title }}
          </el-tag>
        </div>
      </div>

      <!-- 可视化图表组件 -->
      <div class="charts-container">
        <PlanMetricsCharts 
          v-if="selectedPlans.length > 0 && comparisonMetrics && comparisonMetrics.length > 0"
          :metrics-data="comparisonMetrics"
          :selected-constraint-id="null"
        />
        
        <!-- 空状态提示 -->
        <el-empty 
          v-else 
          description="请选择至少一个方案进行对比分析"
          :image-size="200"
        >
          <template #image>
            <el-icon :size="100" color="#c0c4cc">
              <TrendCharts />
            </el-icon>
          </template>
        </el-empty>
      </div>
    </div>

    <!-- 对话框底部 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { TrendCharts, Download } from '@element-plus/icons-vue'
import PlanMetricsCharts from './PlanMetricsCharts.vue'

export default {
  name: 'PlanComparisonDialog',
  components: {
    PlanMetricsCharts,
    TrendCharts,
    Download
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    // 选中的方案列表
    selectedPlans: {
      type: Array,
      default: () => []
    },
    // 比对指标数据
    comparisonMetrics: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'remove-plan', 'export'],
  setup(props, { emit }) {
    const dialogVisible = ref(false)

    // 监听 modelValue 变化
    watch(() => props.modelValue, (val) => {
      dialogVisible.value = val
    })

    // 监听 dialogVisible 变化
    watch(dialogVisible, (val) => {
      emit('update:modelValue', val)
    })

    /**
     * 获取方案标签类型
     */
    const getPlanTagType = (index) => {
      const types = ['primary', 'success', 'warning', 'danger', 'info']
      return types[index % types.length]
    }

    /**
     * 移除方案
     */
    const handleRemovePlan = (planId) => {
      emit('remove-plan', planId)
    }

    /**
     * 关闭对话框
     */
    const handleClose = () => {
      dialogVisible.value = false
    }

    /**
     * 导出报告
     */
    const handleExport = () => {
      // TODO: 实现导出功能
      ElMessage.info('导出功能开发中...')
      emit('export')
    }

    return {
      dialogVisible,
      getPlanTagType,
      handleRemovePlan,
      handleClose,
      handleExport
    }
  }
}
</script>

<style scoped>
.plan-comparison-dialog {
  height: 90vh;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dialog-title {
  color: #409EFF;
  font-size: 24px;
  font-weight: 700;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  display: flex;
  align-items: center;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  height: calc(90vh - 200px);
  overflow: hidden;
}

/* 选中的方案栏 */
.selected-plans-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.plans-label {
  font-weight: 600;
  color: rgb(1, 128, 165);
  margin-right: 15px;
  white-space: nowrap;
}

.plans-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

/* 图表容器 */
.charts-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 深度样式 - 对话框 */
:deep(.el-dialog__header) {
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
  height: calc(90vh - 180px);
  overflow: hidden;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #e4e7ed;
  padding: 15px 20px;
}
</style>

